<template>
  <div class="dashboard-container">
    <el-row :gutter="24">
      <el-col :span="24">
        <el-row :gutter="24">
          <el-col :span="8">
            <el-card class="box-card">
              <el-row type="flex" class="row-bg" justify="space-between">
                <el-col class="font-color-909090" :span="18">用户总计</el-col>
                <el-col class="font-right" :span="6"><el-tag size="mini">总计</el-tag></el-col>
              </el-row>
              <span class="bold">{{count_data.user_all}}</span>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="box-card">
              <el-row type="flex" class="row-bg" justify="space-between">
                <el-col class="font-color-909090" :span="18">今日新增</el-col>
                <el-col class="font-right" :span="6"><el-tag size="mini">本日</el-tag></el-col>
              </el-row>
              <span class="bold">{{count_data.user_today}}</span>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="box-card">
              <el-row type="flex" class="row-bg" justify="space-between">
                <el-col class="font-color-909090" :span="18">本月新增</el-col>
                <el-col class="font-right" :span="6"><el-tag size="mini">本月</el-tag></el-col>
              </el-row>
              <span class="bold">{{count_data.user_month}}</span>
            </el-card>
          </el-col>
        </el-row>
        <div id="main" ref="chart" style="width: 100%;height: 600px;" />
      </el-col>
   
    </el-row>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as echarts from 'echarts'
import { list} from '@/api/welcome' // api接口
require('echarts/theme/macarons') // echarts theme

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
      count_data : {

      },
      user_chat:{

      },
      // 版本
      edition: [
        {
          title: '框架名称',
          content: 'maidou-admin'
        }, {
          title: '框架版本',
          content: 'v1.0'
        }, {
          title: '框架特色',
          content: '零基础，前后端分类，集成api文档，极简'
        }, {
          title: 'gitee',
          content: 'https://gitee.com/doudou-y/maidou-admin-api'
        }, {
          title: 'github',
          content: 'https://github.com'
        }
      ],
      // 版本
      updateLog: [
        {
          date: '2022年1月25日',
          content: 'v1 第一版更新'
        }
      ]
    }
  },
  async created() {
    
      // this.get_data();
      const res = await list()
      const { data: { count, chartdata } }= res
      this.count_data = count
      this.user_chat = chartdata
      this.chart()
  },
  methods: {
    chart() {
      const myChart = echarts.init(this.$refs.chart)
      const option = {
        title: {
          text: '用户数据'
        },
        tooltip: {
           trigger: 'axis',
              axisPointer: {
                  type: 'cross',
                  crossStyle: {
                      color: '#999'
                  }
              }
        },
        legend: {
          data: this.user_chat.legend
        },
       toolbox: {
              feature: {
                  dataView: {show: false, readOnly: false},
                  magicType: {show: true, type: ['line', 'bar']},
                  restore: {show: false},
                  saveAsImage: {show: false}
              }
          },
        grid: {
          x: 70,
            x2: 50,
            y: 60,
            y2: 50
        },
        xAxis: [
          {
              type: 'category',
              data: this.user_chat.xAxis,
              axisPointer: {
                  type: 'shadow'
              }
          }
        ],
        yAxis: [
          {
              type: 'value',
              name: '人数',
              min: 0,
              max: this.user_chat.yAxis.maxnum,
              // interval: 5,
              minInterval: 1,
              axisLabel: {
                  formatter: '{value} 人'
              }
          }
        ],
        series: [ {
                  name : '人数',
                  type : 'bar',
                  barWidth : '50%',
                  itemStyle: {
                      normal: {
                          label: {
                              show: true, //开启显示
                              position: 'top', //在上方显示
                              textStyle: { //数值样式
                                  color: '#666',
                                  fontSize: 12
                              }
                          }
                      }
                  },
                  data : this.user_chat.series
              } ]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.box-card{
  margin-bottom: 24px;
  .bold{
    display: block;
    text-align: center;
    font-size: 32px;
    font-weight: bold;
  }
}
.font-right{
  text-align: right;
}
.font-color-909090{
  color: #909090;
}
.item{
  overflow: auto;
}
</style>
